<template>
  <div class="body mui-content">
    <div class="mb">
      <div class="personnel">
        <div class="nva">
          <div class="Youth">{{name}}</div>
        </div>
      </div>
      <div id="pullrefresh" class="">
        <div  v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
          <!-- <scroller class="scroller" :on-infinite="infinite" :on-refresh="refresh" ref="myscroller"> -->
            <ul class="mui-table-view-chevron">
              <div class="person">
                <div class="person-data" v-for="(li,index) in list" :key="index">
                  <div class="discovery">
                    <div></div>
                  </div>
                  <div class="mui-input-row mui-checkbox mui-left">
                    <label></label>
                    <input name="test" :value="li.uid" type="checkbox">
                  </div>
                  <div class="headIcon" :style="{background: 'url('+ li.photo + ')'}"></div>
                  <div class="name" @click="toName(li.uid)">{{li.name}}</div>
                </div>
              </div>
            </ul>
          <!-- </scroller> -->
        </div>
      </div>
      <div class="mui-bar-tab bottomdiv">
        <div class="person all_in">
          <div class="mui-input-row mui-checkbox mui-left">
            <label>全选</label>
            <input name="checkbox" value type="checkbox" id="all" @change="all_person()">
          </div>
          <div class="pass" @click="pass_all()">通过</div>
          <div class="refuse" @click="refuse_all()">拒绝</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isLogin } from '@/api/login'
import { getMemberList, agree } from '@/api/society'
export default {
  name: 'ApplyList',
  data () {
    return {
      list: [],
      name: this.$route.query.name,
      page: 1,
      sid: this.$route.query.sid,
      finalPage: 1
    }
  },
  created () {
    this.isLogin()
    this.loadList(1)
  },
  methods: {
    all_person () {
      var box = document.getElementsByName('test')
      var btn = document.getElementById('all')
      if (btn.checked === true) {
        for (let i = 0; i < box.length; i++) {
          box[i].checked = true
        }
      } else {
        for (let i = 0; i < box.length; i++) {
          box[i].checked = false
        }
      }
    },
    isLogin () {
      isLogin().then(res => {
        if (res.code === 0) {
          alert('请先登录')
          this.$router.push('/login')
        }
      })
    },
    loadMore () {
      if (this.finalPage >= this.page) {
        this.busy = true
        console.log(123123)
        this.page++
        this.loadList(this.page)
        setTimeout(() => {
        // 这里请求接口去拿数据，实际应该是调用一个请求数据的方法
          this.busy = false
          console.log(454545)
        }, 1000)
      } else {
        this.finalPage = false
      }
    },
    loadList (page) {
      getMemberList({
        sid: this.sid,
        status: '3',
        page: page
      })
        .then(res => {
          this.finalPage = res.data.last_page
          this.name = res.msg
          this.list = this.list.concat(res.data.data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    pass_all () {
      const obj = document.getElementsByName('test')
      const checkVal = []
      for (let k in obj) {
        if (obj[k].checked) {
          checkVal.push(obj[k].value)
        }
      }
      agree({
        sid: this.sid,
        uid: checkVal,
        status: '1'
      })
        .then(res => {
          alert(res.msg)
          location.reload()
        })
        .catch(err => {
          console.log(err)
        })
    },
    refuse_all () {
      const obj = document.getElementsByName('test')
      const checkVal = []
      for (let k in obj) {
        if (obj[k].checked) {
          checkVal.push(obj[k].value)
        }
      }
      agree({
        sid: this.sid,
        uid: checkVal,
        status: '2'
      })
        .then(res => {
          alert(res.msg)
          location.reload()
        })
        .catch(err => {
          console.log(err)
        })
    },
    toName (uid) {
      this.$router.push('/user?sid=' + this.sid + '&uid=' + uid)
    }
  }
}
</script>

<style type="text/css" scoped>
@import '../style/css/mui.min';
* {
  margin: 0;
  padding: 0;
}

.body {
  /* background-image: url(../style/img/bg-bj.png); */
  /* background-size: 100% 100%; */
  font-family: PingFang SC;
  touch-action: pan-y;
  min-height: 600px;
}
.mb {
  width: 100%;
  height: inherit;
  min-height: 600px;
  background: rgba(255, 255, 255, .3);
}
#inner {
  min-height: 500px;
  height: auto;
  overflow-y: auto;
}
.scroller {
  margin-top: 80px;
}
.person {
  width: 98%;
  /* background: white; */
  margin-left: 1%;
}

.person-data {
  border-bottom: solid 1px rgba(118, 102, 102, .2);
}

.headIcon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  float: left;
  margin-top: 12px;
  background-size: cover !important;
}

.name {
  display: inline-block;
  width: 50%;
  height: 100%;
  line-height: 74px;
  font-size: 18px;
  font-weight: 600;
  color: rgba(22, 22, 22, 1);
  margin-left: 5px;
}

.discovery div {
  background: url(../style/img/sign.png) no-repeat;
  background-size: cover;
  width: 10px;
  height: 20px;
  float: right;
  display: inline-block;
  margin-right: 30px;
  margin-top: 25px;
}

.personnel {
  float: left;
  width: 98%;
  margin-left: 1%;
}

.mui-content > .mui-table-view:first-child {
  margin-top: -1px;
}

.mui-pull-caption {
  display: none !important;
}

.mui-scroll-wrapper {
  top: 68px;
}

.nva {
  float: left;
  width: 100%;
  height: 68px;
  /* background: white; */
  border-bottom: dashed 2px rgba(118, 102, 102, 1);
}

.Youth {
  float: left;
  font-size: 20px;
  font-weight: 600;
  line-height: 74px;
  padding-left: 20px;
}

.all_in {
  height: 80px !important;
}

.refuse {
  width: 30%;
  height: 50px;
  background: #8a8a8a;
  border-radius: 30px;
  float: right;
  color: white;
  text-align: center;
  line-height: 50px;
  margin-top: 15px;
  margin-right: 10px;
}
.pass {
  width: 30%;
  height: 50px;
  background: #f97782;
  border-radius: 30px;
  float: right;
  color: white;
  text-align: center;
  line-height: 50px;
  margin-top: 15px;
  margin-right: 10px;
}

.mui-checkbox {
  height: 30px;
  margin-top: 20px;
  display: inline-block;
  float: left;
}

.bottomdiv {
  background: #fff;
  position: fixed;
  z-index: 10;
  height: 63px;
  border-bottom: 0;
  backface-visibility: hidden;
}

.mui-content {
  /* background: white; */
  background-image: url(../style/img/bg-bj.png);
}
</style>
